<template>
  <div>
    <el-form :inline="true" :model="formInline" :rules="rules" ref="formInline" class="demo-form-inline">
      <el-form-item prop="thesisLayoutId">
        <el-input v-model="formInline.thesisLayoutId" placeholder="请输入论文标准id"></el-input>
      </el-form-item>
      <el-form-item prop="thesisLayoutName">
        <el-input v-model="formInline.thesisLayoutName" placeholder="请输入论文标准名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="checkSubmit('formInline')">查询</el-button>
        <el-button type="primary" @click="AddMajorVisible = true"  >新增标准</el-button>
      </el-form-item>

    </el-form>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">

      <el-table-column
        prop="thesisLayoutId"
        label="论文格式编号">
      </el-table-column>
      <el-table-column
        prop="thesisLayoutName"
        label="论文规范名称">
      </el-table-column>
      <el-table-column
        prop="thesisLayoutUpdate"
        label="上传日期"
        :formatter="dateFormat">
      </el-table-column>
      <el-table-column label="操作" >
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit"   @click="toThesislayout(scope.row)">编辑</el-button>
                <el-button type="primary" @click="toupload(scope.row.thesisLayoutId)">上传标准</el-button>
              <el-button type="primary" icon="el-icon-delete" @click.native="thesisLayoutDel(scope.row.thesisLayoutId)">删除</el-button>

            </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="添加"
      width="40%"
      :visible.sync="AddMajorVisible">
      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
          <el-form-item label="论文规范名称" prop="thesisLayoutName" required>
            <el-input type="text" v-model="ruleForm2.thesisLayoutName" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitFormAdd('ruleForm2')">提交</el-button>
            <el-button @click="resetForm('ruleForm2')">重置</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="修改论文规范" :visible.sync="updateLayout ">
      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
          <el-form-item label="论文格式编号" prop="thesisLayoutId" required>
            <el-input type="text" v-model="ruleForm2.thesisLayoutId" auto-complete="off" disabled=true></el-input>
          </el-form-item>
          <el-form-item label="论文规范名称" prop="thesisLayoutName" required>
            <el-input type="text" v-model="ruleForm2.thesisLayoutName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateLayout1('ruleForm2')">提交</el-button>
            <!-- <el-button @click="updateLayout('ruleForm2')">重置</el-button> -->
          </el-form-item>
      </el-form>
		</el-dialog>


    <el-dialog title="论文标准提交" :visible.sync="dialogFormVisible">
        <el-upload
      class="upload-demo"
      ref="upload"
      multiple
      :data="uploadData"
      :onError="uploadError"
      :onSuccess="uploadSuccess"
      :beforeUpload="beforeAvatarUpload"
      :action="importFileUrl"
       accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,.csv,text/plain"
      :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传pdf,doc,docx，ppt,pptx文件，且不超过10M</div>
      </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false" @click.native="dorefresh()">确 定</el-button>
          </div>
      </el-dialog>

    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageIndex"
      :page-size="pageSize"
      layout="total,prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

</div>

  </template>
  <style>
  .el-table th{
    text-align: center;
  }
  </style>
  <script>
  import {ThesisLayoutmanageFy,ThesisLayoutmanageDel,ThesisLayoutmanageUp,uploadThesisLayout,ThesisLayoutmanageAdd} from'@/axios/api'
  import {formatDate} from '@/common/js/date'
    export default {
      data() {
        return {
        formInline:{
          thesisLayoutId:'',
          thesisLayoutName:''
        },
        importFileUrl:'/api/admin/uploadThesisLayout',
        uploadData:{
          thesisLayoutId:''
        },

        formLabelWidth: '120px',
        dialogFormVisible:false,
        AddMajorVisible:false,
        updateLayout:false,
          pageIndex : 1,
          total:100,
          pageSize:10,
          tableData: [],
          /**
           * 验证
           * @type {Object}
           */
          rules: {
           studentId: [
             { required: true, message: '请输入查询或教学计划名称', trigger: 'blur' }
           ],
        },
        ruleForm2:{
          thesisLayoutId:'',
          thesisLayoutName:'',
          thesisLayoutUpdate:''
        },
        thesisLayout:{
          thesisLayoutId:'',
          thesisLayoutName:'',
          thesisLayoutUpdate:''

        },
        thisisLayupload:{
          thesisLayoutId:'',
          thesisLayoutName:'',
          thesisLayoutUpdate:'',
          thesisLayoutContent:'',
          thesisLayoutUpdate:''

        },
        id:'',


        rules2: {
          thesisLayoutId: [
            { required: true,message:"请输入内容", trigger: 'blur' }
          ],
          thesisLayoutName: [
            { required: true,message:"请输入内容", trigger: 'blur' }
          ]
        },
        }
      },


      methods:{

        dorefresh(){
          this.thesislayoutList()
        },

        toupload(id){
          this.uploadData.thesisLayoutId=id,
          console.log(id+"------"+this.uploadData.thesisLayoutId);
          this.dialogFormVisible = true
        },



        /**
         * 修改
         * @return {[type]} [description]
         */
        updateLayout1(ruleForm2){

          // this.ruleForm2.thesisLayoutUpdate = formatDate(new Date(this.ruleForm2.thesisLayoutUpdate),"yyyy-MM-dd");
          console.log(this.ruleForm2);
          let param = {thesisLayoutId:this.ruleForm2.thesisLayoutId,thesisLayoutName:this.ruleForm2.thesisLayoutName}
          ThesisLayoutmanageUp(param).then(res => {

  					if(res.status == 200) {
  						this.$message({
  							message: res.message,
  							type: 'success'
  						});
  						this.updateLayout=false,
  						this.thesislayoutList();
  					} else {
  						this.$message({
  							message: res.message,
  							type: 'info'
  						})
  					};
  				})
        },
        toThesislayout(thesisLayout){
          console.log(thesisLayout);
          this.ruleForm2 = thesisLayout,
          this.updateLayout=true
        },
        /**
         * 添加
         * @param  {[type]} formName [description]
         * @return {[type]}          [description]
         */
        submitFormAdd(formName) {
          console.log( this.$refs[formName]);
          this.$refs[formName].validate((valid) => {
            if (valid) {
              // alert('submit!');
              console.log(this.ruleForm2);

              this.AddMajorVisible=false;
              this.ruleForm2.thesisLayoutUpdate = formatDate (new Date(),'yyyy/MM/dd');
              let param = {thesisLayoutName:this.ruleForm2.thesisLayoutName,thesisLayoutUpdate:this.ruleForm2.thesisLayoutUpdate};

              this.ThesisLayoutmanageAdd1(param);
              this.thesislayoutList();
              this.$refs[formName].resetFields();
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        ThesisLayoutmanageAdd1(){
           let params={thesisLayoutId:this.ruleForm2.thesisLayoutId,
                       thesisLayoutName:this.ruleForm2.thesisLayoutName,
                       thesisLayoutUpdate:this.ruleForm2.thesisLayoutUpdate
           }
           console.log(params);
           ThesisLayoutmanageAdd(params).then(res =>{
             console.log(res);
             if (res.status == 200) {
               this.$message({
                 message: res.message,
                 type: 'success'
               });
               this.ruleForm2.thesisLayoutId='',
               this.ruleForm2.thesisLayoutName='',
               this.ruleForm2.thesisLayoutUpdate='',
						   this.AddMajorVisible=false,
               this.thesislayoutList()
             }else {
						this.$message({
							message: res.message,
							type: 'info'
						})
					};
				})
      },
         resetForm(formName) {
            this.$refs[formName].resetFields();
          },
        /**
         * 日期格式化
         */
        dateFormat(row,column){
          var date = row[column.property];
          return formatDate (new Date(date),'yyyy-MM-dd');
        },
        checkSubmit(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.thesislayoutList();
            } else {
              console.log('error submit!!');
              return false;
            }
          });

        },

        // doThesisLayoutmanageUp(name,path) {
        //   let param = {thesisLayoutId:this.id,thesisLayoutName:name,thesisLayoutContent:path}
        //   console.log(this.id);
        //   ThesisLayoutmanageUp(param).then(res => {
        //
        //     if(res.status == 200) {
        //       this.$message({
        //         message: res.message,
        //         type: 'success'
        //       });
        //       this.thisisLayupload.thesisLayoutContent='',
        //       this.updateLayout=false,
        //       this.thesislayoutList();
        //
        //     } else {
        //       this.$message({
        //         message: res.message,
        //         type: 'info'
        //       })
        //     };
        //   })
        // },
//文件上传
    // 上传成功后的回调
        // uploadSuccess : (response, file, fileList) => {
        //   console.log(response.resData);
        //   console.log(file);
        //   console.log(fileList);
        //   console.log(this.id);
        //   this.$message({
        //     message:"response.message",
        //     type: "success"
        //   })
        //   //  this.thisisLayupload.thesisLayoutUpdate=formatDate(new Date(this.thisisLayupload.thesisLayoutUpdate),'yyyy/MM/dd');
        //   //  console.log(this.thisisLayupload);
        //     // let param = {thesisLayoutId:this.id,thesisLayoutName:file.name,thesisLayoutContent:response.resData}
        //     //this.doThesisLayoutmanageUp(file.name,response.resData);
        //
        //   //alert("提交成功");
        //
        //
        // },
        // 上传错误
        uploadError :(response, file, fileList) => {
          this.$message({
            message:"response.message",
            type: "success"
          })
          //alert("提交出错了")
        },
        // 上传前对文件的大小的判断
        beforeAvatarUpload (file) {
          const extension1 = file.name.split('.')[1] === 'pdf'
          const extension2 = file.name.split('.')[1] === 'txt'
          const extension3 = file.name.split('.')[1] === 'doc'
          const extension4 = file.name.split('.')[1] === 'docx'
          const extension5 = file.name.split('.')[1] === 'ppt'
          const extension6 = file.name.split('.')[1] === 'pptx'
          const isLt2M = file.size / 1024 / 1024 < 10
          if (!extension2 && !extension3 && !extension4 && !extension5 && !extension6  && !extension1) {
            this.$alert('上传模板只能是pdf、doc、docx、ppt、pptx 格式!', '温馨提示：', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `action: ${ action }`
                  });
                }
              });
          }
          if (!isLt2M) {
            this.$alert('上传文件大小不能超过 10MB!', '温馨提示：', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `action: ${ action }`
                  });
                }
              });
          }
          return extension1 ||extension2 || extension3 || extension4 || extension5|| extension6 && isLt2M
        },
        // 文件上传组件
        submitUpload() {
            this.$refs.upload.submit();


        },


      // toThesislayout(thesisLayout){
      //   this.thesisLayout = thesisLayout,
      //
      //   this.updateLayout = true
      // },

        thesisLayoutDel(id){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let params = {thesisLayoutId:id};
          ThesisLayoutmanageDel(params).then(res =>{
            console.log(id);
            if (res.status == '200') {
                this.handleCurrentChange(this.pageIndex);
              this.$message({
                message: res.message,
                type: 'success'
              });
            }
          })
        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        /**
         * 分页页面展示
         * @return {[type]} [description]
         */
        thesislayoutList(){
          let params = {pageIndex: this.pageIndex,
             thesisLayoutId: this.formInline.thesisLayoutId,
             thesisLayoutName:this.formInline.thesisLayoutName
            }
          ThesisLayoutmanageFy(params).then(res =>{
            console.log(res.resData.list);
            console.log(res.resData);
            console.log(res.resData.pageSize);
            this.pageSize = res.resData.pageSize;
            this.total = res.resData.total;
            this.tableData=res.resData.list;
          })
        },
        /**
         * 分页
        */
      handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            let params = {pageIndex:val,thesisLayoutId: this.formInline.thesisLayoutId,thesisLayoutName:this.formInline.thesisLayoutName };
            ThesisLayoutmanageFy(params).then(res =>{
              console.log(res);
            this.tableData =  res.resData.list;
            // this.pay = res.resData.studentFirstMoney + res.resData.studentSecondMoney;

            })
          },
      },

      mounted(){
        this.thesislayoutList()
      }
    }

</script>
